<div nz-row nzType="flex" nzAlign="strecth" nzGutter="16" class="py-md">

  <div nz-col class="width-xxl">
    <nz-card nzTitle="基本类型键" class="height-full">

      <nz-input-group nzSuffixIcon="anticon anticon-search">
        <input nz-input [(ngModel)]="params.keywords" (ngModelChange)="debounceLoad()" placeholder="请输入关键词">
      </nz-input-group>

      <nz-divider class="mb-md"></nz-divider>

      <ul nz-menu nzMode="inline" class="border-right-0">
        <li nz-menu-item *ngFor="let item of data.keys" [nzSelected]="params.key?.baseTypeKey === item.baseTypeKey" (click)="changeKey(item)"
          class="key-item my0">
          <div nz-row nzType="flex" nzAlign="middle" nzJustify="space-between">
            <div nz-col [title]="item.baseTypeKey + '（' + item.baseTypeName + '）'" class="flex-1 text-truncate pr-sm">{{item.baseTypeKey}}（{{item.baseTypeName}}）</div>
            <div nz-col class="key-mgnt-tools">
              <i (click)="createValue($event)" class="anticon anticon-plus-circle-o point" title="添加值"></i>
              <i *ngIf="!item.isSystemBuiltin" (click)="updateKey(item, $event)" class="anticon anticon-edit point" title="修改键"></i>
              <nz-popconfirm *ngIf="!item.isSystemBuiltin" nzTitle="您确定要删除该数据吗？" (nzOnConfirm)="deleteKey(item)">
                <i nz-popconfirm class="anticon anticon-delete point" title="删除键"></i>
              </nz-popconfirm>
            </div>
          </div>
        </li>
      </ul>

      <nz-divider class="mt-md mb-sm"></nz-divider>

      <div (click)="createkey()" class="alone-btn point line-height-lg">
        <i class="anticon anticon-plus-circle-o mr-sm"></i>
        <span>创建基本类型键</span>
      </div>

    </nz-card>
  </div>

  <div nz-col class="flex-1">
    <nz-card nzTitle="基本类型值" class="height-full">
      <nz-table #valuesTable [nzData]="data.values" [nzLoading]="config.valuesLoading" [nzFrontPagination]="false" [nzShowPagination]="false">

        <thead>
          <tr>
            <th>顺序号</th>
            <th>基本类型值</th>
            <th>最后更新人</th>
            <th>最后更新时间</th>
            <th>操作</th>
          </tr>
        </thead>

        <tbody>
          <tr *ngFor="let data of valuesTable.data">
            <td>{{data.sequence}}</td>
            <td>{{data.baseTypeValue}}</td>
            <td>{{data.lastModifiedBy}}</td>
            <td>{{data.lastModifiedTime | date:'yyyy-MM-dd hh:mm:ss'}}</td>
            <td>
              <a (click)="updateValue(data)">修改</a>
              <nz-divider nzType="vertical"></nz-divider>
              <nz-popconfirm nzTitle="您确认删除该数据吗？" nzPlacement="topRight" (nzOnConfirm)="deleteValue(data)">
                <a nz-popconfirm>删除</a>
              </nz-popconfirm>
            </td>
          </tr>
        </tbody>

      </nz-table>
    </nz-card>
  </div>

</div>